<template>
    <div class='pos'>
      <div>
        <!-- 此对话框适用于退出全屏取消考试成绩用 -->
         <Modal
        v-model="modal3" okText='退出考试'  cancelText='继续加油!'
        title="确认你要放弃本次考试吗!"
        @on-ok="quitOk"
        @on-cancel="quitCancel">
        <p>坚持就是胜利!</p>
    </Modal>
    <!-- 此对话框用于考试信息确认 -->
           <Modal  v-model="modal2"  title="确认你的考试信息"      @on-ok="startok"
        @on-cancel="startcancel">
        <p>{{examPageInfo.examInfo}}</p>
        <p>{{examPageInfo.examPageTitle}}</p>
         <p>{{examPageInfo.examStartTime}}</p> 
         <p>{{examPageInfo.examTime}}</p> 
       </Modal>
      </div>
      <div class='up'><h1 >距离考试开始还有1小时20分30秒</h1></div><h1 class='up'>距离考试开始还有1小时20分30秒</h1>
      <div v-if="show" >
      <div class='center'>
        <h1>即将开始考试 请认真作答 考试加油!</h1><br/>
        <Button @click="modal2=true;screenfull()" type="error" size="small">开始考试</Button>
        </div>
        </div>
      <div v-else>
          <Layout>
        <Header><div class="Header"><svg class="icon" aria-hidden="true"><use xlink:href="#iconguanmao"></use></svg>闽江学院在线考试系统在线考试平台</div><div>
</div></Header>
      </Layout>
      <div class="howTime"><svg class="icon" aria-hidden="true"><use xlink:href="#iconziyuankaoshi
"></use></svg><ShowTime ref="getshowtimedata"/></div>
      <!-- 此对话框用于考试评价 -->
        <Modal  v-model="modal1" title="请对该试卷进行评价"      @on-ok="ok()"
        @on-cancel="cancel">
        <p>请给试卷打分:</p>
        <Rate allow-half v-model="valueHalf" />
        <p>你想对老师吐槽的话:</p>
        <Input type="text" v-model="StudentWords"></Input>
    </Modal>
       <Content> 
         <div class="answerField">
         <div class="Progress"><Progress status="wrong" :percent="(progress/this.Msg.length)*100" :stroke-width="25" text-inside /></div> 
          <div v-if="progress<singleSize">
            <div ><h1 >{{Msg[progress].question}}</h1></div>
          <strong><h3>单选题</h3></strong>
          <div>
              <input type="radio" v-model="answer" :value="itemsValue[0]">A:{{Msg[progress].A}}</input>
              <input type="radio" v-model="answer" :value="itemsValue[1]">B:{{Msg[progress].B}}</input></div>
           <div><input type="radio" v-model="answer" :value="itemsValue[2]">C:{{Msg[progress].C}}</input>
              <input type="radio" v-model="answer" :value="itemsValue[3]">D:{{Msg[progress].D}}</input>
          </div>
          </div>

          <div v-else-if="progress<=Msg.length-1">
            <div><h1>{{Msg[progress].question}}</h1></div>
           <strong><h3>单选题</h3></strong>
            <div>
              <input type="checkbox" v-model="multiAnswer" :value="itemsValue[0]">A:{{Msg[progress].A}}</input>
              <input type="checkbox" v-model="multiAnswer" :value="itemsValue[1]">B:{{Msg[progress].B}}</input></div>
           <div><input type="checkbox" v-model="multiAnswer" :value="itemsValue[2]">C:{{Msg[progress].C}}</input>
              <input type="checkbox" v-model="multiAnswer" :value="itemsValue[3]">D:{{Msg[progress].D}}</input>
          </div>
          </div>
          <div v-else>     
          </div>
             <div class="btn"><Button @click="prev()" v-if="progress!==this.Msg.length">上一题</Button>
              <Button v-if="answer===''&&multiAnswer.length===0&&progress!==this.Msg.length" @click="next" disabled >下一题</Button>
              <Button v-else-if="answer!==''&&multiAnswer.length!==0||progress!==this.Msg.length" @click="next()" >下一题</Button> 
               <Button v-else-if="progress===this.Msg.length" @click="upanswers">提交答案</Button>
          </div>
          </div></Content>
      </div>
    </div>
</template>
<script>
  import screenfull from 'screenfull'
  import ShowTime from '../showTime'
export default {
  components:{
    ShowTime 
  },
  data() {
    return {
      show:true,
      isFullScreen:false,
      backTime:0,
      modal2:false,
      modal1: false,
      modal3: false,
      rater: false,
      Msg: [],
      //初始化一些数据
      progress: 0,
      itemsValue: ["A", "B", "C", "D"],
      answer: "",
      answers: new Map(),
      subbmitted: false,
      scare: 0,
      multiAnswer: [],
      singleSize: 0,
      count: 0,
      valueHalf: 5,
      StudentWords: "",
      singleStudentAnswered: new Map(),
      multiStudentAnswered: new Map(),
      examPageInfo:{},
      setter:'',
      _id:'',
      answeredPage:{},
      studentName:'',
      sum1:0,
      sum2:0,
      a:0,
      examPageTitle:'',
      examStartTime:new Date,
      examTime:'',
      testType:''

    };
  },
  beforeMount() {
  this.studentName=this.$route.query.studentName
    var a = this.$route.query.Msg;
    this.examPageInfo=a
    this.setter=a.setter
    this._id=a._id
    this.examPageTitle=a.examPageTitle
    this.examTime=a.examTime
    this.testType=a.testType

      console.log(a)
      console.log(this.examTime)
      console.log(this.examPageTitle)
    a.singleChoiceData.map(item => {
      this.Msg.unshift(item);
    });
    a.multiChoiceData.map(item => {
      this.Msg.push(item);
    });
    this.singleSize = a.singleChoiceData.length;
  },
  mounted() {
       window.onresize = () => {
            // 全屏下监控是否按键了ESC
           
             if (!this.checkFull()) {
              // 全屏下按键esc后要执行的动作
              this.modal3=true
            }
          }
  },
  methods: {
    //退出考试触发事件
    quitOk(){
        if (!this.checkFull()) {
              // 全屏下按键esc后要执行的动作
              this.isFullscreen =false;
              this.$router.push('/studentPage')
            }  },
    //取消确认退出考试触发事件
    quitCancel(){
        screenfull.toggle();
      this.isFullscreen = true;
    },

     //  全屏事件
    screenfull() {
     /*  screenfull.toggle();
      this.isFullscreen = true; */
      let element = document.documentElement;

if (this.fullscreen) {

if (document.exitFullscreen) {

document.exitFullscreen();

} else if (document.webkitCancelFullScreen) {

document.webkitCancelFullScreen();

} else if (document.mozCancelFullScreen) {

document.mozCancelFullScreen();

} else if (document.msExitFullscreen) {

document.msExitFullscreen();

}

} else {

if (element.requestFullscreen) {

element.requestFullscreen();

} else if (element.webkitRequestFullScreen) {

element.webkitRequestFullScreen();

} else if (element.mozRequestFullScreen) {

element.mozRequestFullScreen();

} else if (element.msRequestFullscreen) {

// IE11

element.msRequestFullscreen();

}

}

this.fullscreen = !this.fullscreen;
    },
    /**
     * 是否全屏并按键ESC键的方法
     */
    checkFull() {
     	//判断浏览器是否处于全屏状态 （需要考虑兼容问题）

		//火狐浏览器

		var isFull = document.mozFullScreen||

		document.fullScreen ||

		//谷歌浏览器及Webkit内核浏览器

		document.webkitIsFullScreen ||

		document.webkitRequestFullScreen ||

		document.mozRequestFullScreen ||

		document.msFullscreenEnabled

		if(isFull === undefined) {

isFull = false

}

return isFull;
    },
    /* 
    ****
    ****提交数据到服务器 */
         ok () {
                 this.answeredPage.sum1=this.sum1
                 this.answeredPage.sum2=this.sum2
                 this.answeredPage.exampageId=this._id
                 this.answeredPage.examPageInfo=this.examPageInfo
                 this.answeredPage.setter=this.setter
                 this.answeredPage.singleStudentAnswered=this.singleStudentAnswered
                 this.answeredPage.multiStudentAnswered=this.multiStudentAnswered
                 this.answeredPage.valueHalf=this.valueHalf
                 this.answeredPage.StudentWords=this.StudentWords
                 this.answeredPage.whoAnswered=this.studentName
                 this.answeredPage.scare=this.scare
                 this.answeredPage.examTime=this.examTime
                 this.answeredPage.examPageTitle=this.examPageTitle
                 this.answeredPage.testType=this.testType


                 var answeredTime=this.getNowFormatDate() 
                this.answeredPage.answeredTime=answeredTime
             this.$axios({
                   method:"post",
                   url:"http://"+this.urlpath+"/SaveStudentAnsweredPage",
                   data:this.answeredPage
               }).then((res)=>{
               })
                 this.valueHalf=0;
                 this.StudentWords='';
                 this.rater = false
                this.$Message.success('已成功导入数据库')
            },
    ///对话框取消触发事件
            cancel () {
                this.valueHalf=0;
                this.StudentWords='';
                this.rater = false   
            },
            //确认考试信息
            startok(){
              this.show=false
            },
            //取消考试信息
            startcancel(){
               screenfull.toggle();
              this.isFullscreen = false;
              this.$router.push('/studentPage')
            },
            /* 点击前一提 事件*/
       prev: function() {
         if (this.progress <= this.singleSize) {
          this.progress--;
          this.answer = this.answers.get(this.progress);
          if (this.progress < 0) {
          this.progress = 0;
          this.answer = this.answers.get(this.progress);
        }
        console.log(this.progress);
      } else if (
        this.progress > this.singleSize ||
        this.progress <= this.Msg.length
      ) {
        this.progress--;
        this.multiAnswer = this.answers.get(this.progress);
      }
    },
    /* 点击后议题事件 */
    next: function() {
      if (this.progress < this.singleSize) {
        if (this.answers.has(this.progress) === false) {
          console.log(this.progress);
          this.answers.set(this.progress, this.answer);
          this.progress++;
          this.answer = "";
        } else {
          this.answer = this.answers.get(this.progress);
          this.progress++;
        }
      } else if (
        this.progress >= this.singleSize ||
        this.progress <= this.Msg.length - 1
      ) {
        if (this.answers.has(this.progress) === false) {
          console.log(this.progress);
          this.answers.set(this.progress, this.multiAnswer);
          this.progress++;
          this.multiAnswer = [];
        } else {
          this.multiAnswer = this.answers.get(this.progress);
          this.progress++;
        }
      } else {
        this.progress = this.Msg.length;
      }
    },
    /* 提交答案事件 */
    upanswers() {
      var studentAnswer = [...this.answers.values()];
      var sum1 = 0;
      for (let i = 0; i < this.singleSize; i++) {
        if (this.Msg[i].Right1 === studentAnswer[i]) {
          sum1 += parseInt(this.Msg[i].singleValue);
          this.singleStudentAnswered.set(i,parseInt(this.Msg[i].singleValue))  
        }else{
            this.singleStudentAnswered.set(i,0)    
        }}
        var sum2 = 0;
        for (let j = this.singleSize; j < this.Msg.length; j++) {
          if (
            this.Msg[j].Right2.sort().toString() ===studentAnswer[j].sort().toString()) {
            sum2 += parseInt(this.Msg[j].singleValue);
            this.multiStudentAnswered.set(j,parseInt(this.Msg[j].singleValue))
          }
          else{
            this.multiStudentAnswered.set(j,0)
          }
        }
        this.scare = sum1 + sum2;
        console.log(sum1+'----'+sum2)
        this.sum1=sum1
        this.sum2=sum2
         this.multiStudentAnswered=[...this.multiStudentAnswered]
         this.singleStudentAnswered=[...this.singleStudentAnswered]

      this.$Modal.info({
        title: "闽江学院在线考试平台",
        content:
          this.scare < 60
            ? "⊙︿⊙不好意思不及格:" + this.scare
            : "Ψ(￣∀￣)Ψ你很棒及格了:" + this.scare
      });
      this.answers.clear();
      this.progress = 0;
      this.rater = true;
      this.modal1=true
    }
  },
};
</script>
<style >
.pos{
  position: relative;
}
.Container {
  display: flex;
  flex-direction: column;
}

.howTime{
  display: flex;
  flex-direction: row;
  position: absolute;
  top: 10px;
  right: 50px;
 ;
}
.answerField {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 400px;
  background-color: #5cadff;
}
.answerField h1 {
  font-size: 30px;
  color: black;
}
.btn {
  padding-top: 100px;
  width: 270px;
  display: flex;
  justify-content: space-between;
}
.Progress {
  width: 600px;
  margin-bottom: 30px;
}
.Header {
  margin: 0 auto;
  color: aliceblue;
  font-size: 20px;
  font-family: Microsoft YaHei;
}
.appraise {
  position: absolute;
  top: 280px;
  left: 150px;
}
.icon {
  width: 2em;
  height: 2em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.center{
margin:100px auto;
 display: flex;
 justify-content: center;
align-items: center;
  width: 600px;
  height: 200px;
  background-color: #999;
}
.up{
 position: absolute;
 right:35%;
}


</style>